import { App, Rect, Leafer } from "leafer-ui";
import { Player } from "../player";
import { Enemy } from '../enemy';
import { Background } from '../background';
import { Fences } from "../background/fences";
import { Tree } from "../background/tree";
import { WIDTH, HEIGHT } from '../global';
import { Collider } from "../collider";

export class Renderer {
    private _app: App;
    private _player: Player;
    private _enemy: Enemy;
    private _trees: Tree;
    isDestroy = false;
    constructor() {
        const app = new App({ 
            view: "app", 
            hittable: false,
            width: WIDTH,
            height: HEIGHT,
            ground: {
                fill: '#32cd79'
            },
            tree: {},
        });
        const b = new Background()
        this._enemy = new Enemy();
        
        const fences = new Fences();
        this._trees = new Tree({x: 0, y: 0});
        const centerRect = new Rect({
            x: WIDTH / 2 - 25,
            y: HEIGHT / 2 - 25,
            fill: 'red',
            width: 50,
            height: 50,
        })
        const testLeafer = new Leafer();
        testLeafer.add(centerRect)
        const treeLeafer = new Leafer();
        app.ground.add(b);
        app.ground.add(fences);
        app.ground.add(this._trees);
        app.ground.add(new Tree({x: window.innerWidth - 150, y: window.innerHeight - 150}));
        this._player = new Player(app.ground);
        app.add(testLeafer);
        app.add(this._player);
        // app.tree.add(this._enemy.group);
        this._app = app;
    }

    run = () => {
        this._player.run(this._trees);
        // const playerBound = new Bounds(this._player.nextFrameBoxBounds);
        // if (playerBound.hit(this._trees.collider.worldBoxBounds)) {
        //     this._player.onHit(this._trees.collider);
        // }

        requestAnimationFrame(this.run)
    }
    destroy() {
        this.isDestroy = true;
        this._app.destroy();
    }
}